<template>
  <div class="comment">
    <b-modal ref="myMessage" hide-footer title="提示">
      <div class="d-block text-center">
        <h4>{{submitResult.msg}}</h4>
      </div>
    </b-modal>
    <div class="top2"></div>
    <b-container>
      <div class="content_message">
        <b-row class="my-1" style="padding:3px;">
          <b-col cols="auto" style="font-size:16px;">
            <label for="input-content">你的留言</label>
          </b-col>
          <b-col cols="8">
            <b-form-textarea
              id="textarea"
              v-model="comment"
              placeholder="请不要超过200个字符"
              :rows="3"
              :max-rows="10"
              size="sm"
            ></b-form-textarea>
          </b-col>
        </b-row>
        <b-row class="my-1" style="padding:3px;">
          <b-col cols="auto" style="font-size:16px;">
            <label for="input-name">你的名字</label>
          </b-col>
          <b-col cols="auto">
            <b-form-input
              size="sm"
              v-model="user"
              id="input-name"
              type="text"
              placeholder="访客"
              style="width:200px;"
            ></b-form-input>
          </b-col>
          <b-col cols="auto">
            <b-button
              style="width:80px;"
              v-on:click="submitComment"
              size="sm"
              :disabled="isDisable"
            >提交</b-button>
          </b-col>
        </b-row>
        <br />
        <paginate-links
          for="commentList"
          :limit="3"
          :async="true"
          :show-step-links="true"
          :step-links="{
          next: '下一页',
          prev: '前一页'
         }"
          :classes="{
           'ul': 'pagination',
           'ul > li': 'page-item',
           'ul > li > a': 'page-link',
         }"
        ></paginate-links>
        <br />
        <paginate name="commentList" :list="commentList" :per="10">
          <b-row v-for="(item,index) in paginated('commentList')" :key="index" class="line">
            <b-col cols="auto">
              <p style="font-size: 14px; font-weight: bold; margin-bottom: 2px; color: #999">
                <span v-if="item">[{{item.date_add | formatDate}}]&nbsp;&nbsp;&nbsp;{{item.name}}</span>
              </p>
            </b-col>
            <b-col cols="auto">
              <div
                style="font-family: Segoe UI, Microsoft YaHei, Verdana, Tahoma, Arial; font-size: 12px; word-break: break-all; word-wrap: break-word; margin-bottom: 8px; color: #F5F5F5"
              >
                <span v-if="item">{{item.content}}</span>
              </div>
            </b-col>
            <b-col cols="auto">
              <div
                style="font-family: Segoe UI, Microsoft YaHei, Verdana, Tahoma, Arial; font-size: 12px; word-break: break-all; word-wrap: break-word; margin-bottom: 8px; color: #999"
              >
                <span v-if="item.response">站长回复：{{item.response}}</span>
              </div>
            </b-col>
          </b-row>
        </paginate>
      </div>
      <br />
      <br />
      <br />
      <br />
    </b-container>
  </div>
</template>

<script>
import qs from 'qs';
//此函数的作用是在月份、日期、小时等小于10时在前面补0
var padDate = function(value) {
  return value < 10 ? '0' + value : value;
};

export default {
  async asyncData(context) {
    let [request1Data] = await Promise.all([context.$axios.get('/api/comments/', { params: { showLoading: false } })]).catch(err => {
      console.log(err);
    });
    return {
      commentList: request1Data.data,
    };
  },
  props: ['parent'],
  data() {
    return {
      user: '',
      comment: '',
      commentList: [],
      submitResult: '',
      paginate: ['commentList'],
      isDisable: false,
    };
  },
  head() {
    return {
      title: '留言板 | 英伦留声机',
    };
  },
  methods: {
    listComments() {
      document.title = '留言板 | 英伦留声机';
      this.$axios
        .get('/api/comments/', { params: { showLoading: false } })
        .then(response => {
          var res = response.data;
          this.commentList = res;
          if (this.commentList) {
            this.$emit('refreshComment', this.commentList.length);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    submitComment() {
      this.isDisable = true;
      setTimeout(() => {
        this.isDisable = false;
      }, 1000);
      this.$axios
        .put('/api/comments/', qs.stringify({ name: this.user, content: this.comment }), { params: { showLoading: false } })
        .then(response => {
          var res = response.data;
          this.submitResult = res;
          this.$refs.myMessage.show();
          this.listComments();
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
  mounted: function() {
    this.$store.dispatch('hideloader');
    //this.listComments();
    if (this.commentList) {
      this.$emit('refreshComment', this.commentList.length);
    }
  },
  filters: {
    //这里的value参数就是要过滤的数据
    formatDate: function(value) {
      var date = new Date(value);
      var year = date.getFullYear();
      var month = padDate(date.getMonth() + 1);
      var day = padDate(date.getDate());
      var hours = padDate(date.getHours());
      var minutes = padDate(date.getMinutes());
      var seconds = padDate(date.getSeconds()); //将整理好的格式化的日期返回
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.content_message {
  font-size: 14px;
  padding: 10px;
  margin: 5px;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
}

.line {
  display: inline-block;
  width: 97%;
  border-top: 1px solid #545454;
  margin-left: 0px;
  padding: 2px;
}

a.page-link {
  color: #222222;
  cursor: pointer;
}
a.page-link:hover {
  color: #999999;
  cursor: pointer;
}
a.page-link:active {
  color: #999999;
  cursor: pointer;
}
a.page-link:visited {
  color: #222222;
  cursor: pointer;
}
a:not([href]):not([tabindex]) {
  color: #222222;
  cursor: pointer;
}
</style>

<!--<style src="../assets/css/link.css"></style>-->
<!--<style src="../assets/css/font.css"></style>-->


